import React, { useEffect, useState } from 'react'

export default function HookEffect() {
    const [count, setCount] = useState(100)
    const [num, setNum] = useState(888)
    // useEffect(callback, 依赖)

    // 实例期
    // useEffect 首次进入会执行   
    // 存在期
    // 修改通过useState
    // 销毁期
    // 
    useEffect(() => {
        return () => {
            console.log('我被销毁了')
        }
    })

    // useEffect(() => {
    //     console.log('我是实例期')
    //     console.log('我是count修改会执行的逻辑')
    //     console.log('我是num修改会执行的逻辑')
    // }, [count, num])

    // useEffect(() => {
    //     console.log('我是实例期---init')
    // }, [])

    // useEffect(() => {
    //     console.log('我是count修改会执行的逻辑')
    // }, [count])

    // useEffect(() => {
    //     console.log('我是num修改会执行的逻辑')
    // }, [num])
    return (
        <div>
            <h2>函数式组件中--生命周期 -- {count}</h2>
            <button onClick={() => {
                setCount(count + 1)
            }}>+ 1</button>

            ---------------
            <div>
                <h2>函数式组件中--生命周期 -- {num}</h2>
                <button onClick={() => {
                    setNum(num + 1)
                }}>+ 1</button>
            </div>
        </div>
    )
}
